<template>
  <div class="personal">
      <div class="user-avatar">
          <img class="avatar" src="../assets/avatar.jpg" alt="avatar">
          <img class="setting" src="../assets/setting.png" alt="setting">
      </div>
      <div class="loan-enter">
        <div class="enter-wrapper">
            <p>全自动审核</p>
            <p>自动下贷</p>
            <img class="pic1" src="../assets/pic1.png" alt="">
            <img class="pic2" src="../assets/pic2.png" alt="">
        </div>
      </div>
      <div class="more-action">
          <div class="user-action">
              <div>
                  <img src="../assets/action1.png" alt="">
                  <p>功能</p>
              </div>
              <div>
                  <img src="../assets/action2.png" alt="">
                  <p>加入讨论群</p>
              </div>
              <div>
                  <img src="../assets/action3.png" alt="">
                  <p>查信用</p>
              </div>
          </div>
          <p class="action-footer">商务合作 10086</p>
      </div>
      <Tabbar/>
  </div>
</template>
<script>
import Tabbar from '@/components/Tabbar.vue'

export default {
    components: {
        Tabbar
    },
    computed: {
        userId () {
            return this.$store.state.userId
        }
    }
}
</script>
<style scoped>
    .user-avatar{
        height: 25vh;
        background-color: #fff;
        position: relative;
    }
    .user-avatar .avatar{
        width:100px;
        height:100px;
        border-radius: 50%;
        position:absolute;
        margin: auto;
        left:0;
        right: 0;
        bottom:0;
        top:0;
        display: block;
    }
    .user-avatar .setting{
        width: 20px;
        height: 20px;
        display: block;
        top:30px;
        right:30px;
        position:absolute;
    }
    .loan-enter{
        height:25vh;
        margin-top:12px;
        background-color:white;
        padding:20px 15px;
    }
    .enter-wrapper{
        height:100%;
        width: 100%;
        background-color: #BDEEF3;
        border-radius:10px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .enter-wrapper .pic1{
        width:90px;
        position:absolute;
        left:10;
        bottom:20px;
    }

    .enter-wrapper .pic2{
        width:120px;
        position:absolute;
        right:0;
        bottom:20px;
    }

    .enter-wrapper p{
        font-size:25px;
        font-weight: bold;
        text-align: center;
        z-index:2;
    }

    .more-action{
        height:30vh;
        background-color:white;
        margin-top:12px;
        position: relative;
    }

    .user-action{
        display: flex;
        padding: 20px 15px;
    }
    .user-action> div{
        padding:10px 20px;
        text-align: center;
    }
    .user-action> div img{
        height:70px;
        display:block;
    }
    .user-action> div p{
        font-size:15px;
        font-weight: bold;
        margin-top:10px;
    }
    .action-footer{
        position: absolute;
        bottom: 10px;
        right:0;
        width: 100%;
        font-size:13px;
        color: #000;
        text-align: center;
        font-weight: bold;
    }
</style>


